<template>
  <div class="message-item" @click="toChat(itemData)">
    <van-badge :content="itemData.unread_count" max="99" :show-zero="false"
      ><van-image width="46px" height="46px" fit="cover" radius="4px" :src="itemData.avatar"
    /></van-badge>
    <div class="content-box">
      <div class="top">
        <div class="title">{{ itemData.name }}</div>
        <div class="time">{{ formatTime(itemData.last_message_time) }}</div>
      </div>
      <div class="bottom">
        <div class="content">{{ itemData.last_message }}</div>
        <!-- <cp-icon name="home-no-notice"></cp-icon> -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { homeMessageItem } from '@/types/home'
import { formatTime } from '@/utils/format'
defineProps<{
  itemData: homeMessageItem
}>()

const router = useRouter()
const toChat = (data: homeMessageItem) => {
  router.push({
    path: '/chat',
    query: {
      sender_id: data.sender_id
    }
  })
}
</script>
<style lang="scss" scoped>
.message-item {
  height: 70px;
  padding: 0px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(229, 229, 229, 1);

  .content-box {
    flex: 1;
    padding-left: 13px;
    .top {
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(51, 51, 51, 1);
      font-size: 16px;
      .title {
        color: var(--cp-text1) !important;
      }
      .time {
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
      }
    }
    .bottom {
      height: 21px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(153, 153, 153, 1);
      font-size: 14px;
    }
  }
}
</style>
